<template>
  <el-card class="Per">
    <div class="Per_top">
      <div class="Per_top_avatar">
        <div class="Per_top_avatar_box">
          <img :src="photo" v-show="photo" class="Per_top_avatar_img">
        </div>
        <p class="Per_top_avatar_txt">修改资料须重新提交审核</p>
      </div>
      <div class="Per_top_rightbtn">
        <el-button type="primary" :disabled="auditStatus=='AUDITING'" @click="$router.push('/qualified')" round>编辑个人资料</el-button>
        <!-- <el-button type="primary" @click="$router.push('/qualified')" round>编辑个人资料</el-button> -->
      </div>
      <div class="Per_top_info">
        <div class="Per_top_info_line">
          <span class="Per_top_info_label">供应商名称</span>
          <el-input placeholder="请输入内容" readonly v-model="name"/>
        </div>
        <div class="Per_top_info_line">
          <span class="Per_top_info_label">联系人姓名</span>
          <el-input placeholder="请输入内容" readonly v-model="contactName"/>
        </div>
        <div class="Per_top_info_line">
          <span class="Per_top_info_label">地址：{{getAddress}}</span>
        </div>
      </div>
    </div>
    <div class="Per_center">
      <div class="Per_center_media">
        <div class="Per_center_media_box">
          <img :src="businessLicenceUrl" v-show="businessLicenceUrl!=''" class="Per_center_media_img">
        </div>
        <p class="Per_center_media_txt">修改资料须重新提交审核</p>
      </div>
      <div class="Per_center_media">
        <div class="Per_center_media_box">
          <img :src="idCardFrontUrl" v-show="idCardFrontUrl!=''" class="Per_center_media_img">
        </div>
        <p class="Per_center_media_txt">法人身份证正面</p>
      </div>
      <div class="Per_center_media">
        <div class="Per_center_media_box">
          <img :src="idCardBackUrl" v-show="idCardBackUrl!=''" class="Per_center_media_img">
        </div>
        <p class="Per_center_media_txt">法人身份证反面</p>
      </div>
      <div class="Per_center_media">
        <div class="Per_center_media_box">
          <img :src="productAuthUrl" v-show="productAuthUrl!=''" class="Per_center_media_img">
        </div>
        <p class="Per_center_media_txt">产品授权书</p>
      </div>
    </div>
    <div class="Per_bottom">
      <el-popover
        placement="top"
        width="340"
        title="修改密码"
        popper-class="pwd-popover"
        v-model="passwordPopover">
        <el-form :model="pwdForm" ref="pwd-form" class="pwd-popover-form" label-position="left" label-width="80px">
          <el-form-item
            prop="oldPassword"
            :rules="{ required: true, message: '请输入当前密码', trigger: 'blur'}"
            label="当前密码">
            <el-input type="text" v-model="pwdForm.oldPassword"></el-input>
          </el-form-item>
          <el-form-item
            prop="newPassword"
            :rules="{ required: true, message: '请输入新密码', trigger: 'blur'}"
            label="新密码">
            <el-input type="text" v-model="pwdForm.newPassword"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" @click="passwordPopover = false" style="margin-right:50px;" type="text">取消</el-button>
          <el-button type="primary" size="mini" @click="doUpdatePassword" round>确定</el-button>
        </div>
        <el-button class="Per_bottom_btn" slot="reference" round>修改密码</el-button>
      </el-popover>
      <el-button class="Per_bottom_btn" type="info" @click="doLogout" round>退出登录</el-button>
    </div>
  </el-card>
</template>

<script>
  import { getSupplyShopInfo, logout, updatePassword } from '~/api/'
  export default {
    data() {
      return {
        passwordPopover: false,
        name: "",
        contactName: "",
        provinceCode: "",
        provinceName: "",
        cityCode: "",
        cityName: "",
        districtCode: "",
        districtName: "",
        longitude: "",
        latitude: "",
        address: "",
        businessLicenceUrl: "",
        idCardFrontUrl: "",
        idCardBackUrl: "",
        productAuthUrl: "",
        otherUrls: [],
        photo: "",
        auditStatus: 'AUDITING',
        pwdForm: {
          oldPassword: '',
          newPassword: ''
        }
      }
    },
    beforeMount () {
      this.init()
    },
    methods: {
      async init () {
        const res = await getSupplyShopInfo(this)
        if (res.code === '0') {
          this.initData(res.data.shopInfo)
          // this.initNotify(res.data.shopInfo.auditStatus)
          // this.$message.success(res.data.shopInfo.auditStatus)
        } else {
          this.$message.error(res.message)
        }
      },
      initNotify(auditStatus) {
        const filter = {
          NO_SUBMIT: {
            title: '错误',
            type: 'error',
            msg: '未提交'
          },
          AUDITING: {
            title: '消息',
            type: 'info',
            msg: '您的资料将在1-2个工作日内审核完毕'
          },
          NO_PASS: {
            title: '警告',
            type: 'warning',
            msg: '审核未通过',
          },
          PASS: {
            title: '成功',
            type: 'success',
            msg: '审核通过'
          }
        }
        this.$notify({
          duration: 0,
          title: filter[auditStatus].title,
          message: filter[auditStatus].msg,
          type: filter[auditStatus].type
        });
      },
      initData (shopInfo) {
        this.name = shopInfo.name
        this.contactName = shopInfo.contactName
        this.photo = shopInfo.photo
        this.provinceCode = shopInfo.auditInfo?shopInfo.auditInfo.provinceCode:''
        this.provinceName = shopInfo.auditInfo?shopInfo.auditInfo.provinceName:''
        this.cityCode = shopInfo.auditInfo?shopInfo.auditInfo.cityCode:''
        this.cityName = shopInfo.auditInfo?shopInfo.auditInfo.cityName:''
        this.districtCode = shopInfo.auditInfo?shopInfo.auditInfo.districtCode:''
        this.districtName = shopInfo.auditInfo?shopInfo.auditInfo.districtName:''
        this.longitude = shopInfo.auditInfo?shopInfo.auditInfo.longitude:''
        this.latitude = shopInfo.auditInfo?shopInfo.auditInfo.latitude:''
        this.address = shopInfo.auditInfo?shopInfo.auditInfo.address:''
        this.businessLicenceUrl = shopInfo.auditInfo?shopInfo.auditInfo.businessLicenceUrl:''
        this.idCardFrontUrl = shopInfo.auditInfo?shopInfo.auditInfo.idCardFrontUrl:''
        this.idCardBackUrl = shopInfo.auditInfo?shopInfo.auditInfo.idCardBackUrl:''
        this.productAuthUrl = shopInfo.auditInfo?shopInfo.auditInfo.productAuthUrl:''
        this.otherUrls = shopInfo.auditInfo?shopInfo.auditInfo.otherUrls:[]
        this.selectedOptions = [this.provinceCode, this.cityCode, this.districtCode]
        this.auditStatus = shopInfo.auditStatus
      },
      async doLogout () {
        const res = await logout(this)
        if (res.code === '0') {
          this.$store.commit('LOGOUT_STATE')
          this.$message.success('已退出登录')
          this.$router.replace('/login')
        } else {
          this.$message.error(res.message)
        }
      },
      doUpdatePassword () {
        this.$refs['pwd-form'].validate(async (result) => {
          if (!result) return
          const res = await updatePassword(this, this.pwdForm.oldPassword, this.pwdForm.newPassword)
          if (res.code === '0') {
            this.$store.commit('LOGOUT_STATE')
            this.$message.success('密码已更改，请重新登录')
            this.$router.replace('/login')
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    computed: {
      getAddress () {
        return this.provinceName+this.cityName+this.districtName+this.address
      }
    }
  }
</script>

<style lang="scss" scoped>
.pwd-popover {

}
.Per {
  padding-top: 15px;
  padding-left: 45px;
  padding-bottom: 40px;
  border-radius: 0 20px 20px 0;
  background-color: #f5f6fa;
  & /deep/ .el-card__body {
    padding: 0;
  }
  &_top {
    overflow: hidden;
    &_avatar {
      float: left;
      width: 174px;
      &_box {
        width: 100%;
        height: 177px;
        background-color: #999;
      }
      &_img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
      }
      &_txt {
        font-size: 14px;
        color: #999;
        text-align: center;
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
      }
    }
    &_info {
      margin-left: 33px;
      float: left;
      & /deep/ .el-input {
        width: 232px;
      }
      & /deep/ .el-input__inner {
        height: 36px;
        border-radius: 18px;
      }
      &_line {
        padding-left: 24px;
        position: relative;
        height: 36px;
        line-height: 36px;
        &:first-child {
          margin-top: 15px;
        }
        &:not(:first-child) {
          margin-top: 30px;
        }
        &:before {
          content: "";
          display: block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #37BC9B;
          position: absolute;
          top: 50%;
          left: 0;
          margin-top: -3px;
        }
      }
      &_label {
        font-size: 18px;
        margin-right: 33px;
      }
    }
    &_rightbtn {
      float: right;
      padding-right: 45px;
    }
  }
  &_center {
    overflow: hidden;
    margin-top: 40px;
    &_media {
      float: left;
      width: 22%;
      margin-right: 3%;
      &_box {
        width: 100%;
        height: 87.9%;
        background-color: #999;
        position: relative;
        &::before {
          content: "";
          display: block;
          width: 1px;
          margin-left: -1px;
          padding-top: 100%;
        }
      }
      &_img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
      }
      &_txt {
        font-size: 14px;
        color: #333;
        text-align: center;
        height: 20px;
        line-height: 20px;
        margin-top: 10px;
      }
    }
  }
  &_bottom {
    text-align: right;
    margin-top: 40px;
    margin-right: 15px;
    &_btn {
      margin-left: 70px;
    }
  }
}
</style>
